<template>
  <div class="wrapper">
    <Header></Header>
    <main>
      <div class="navMenu">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>账号管理</span>
            </template>
            <el-submenu index="1-1">
              <template slot="title"
                ><router-link to="/admin" tag="span"
                  >管理员</router-link
                ></template
              >
            </el-submenu>
            <el-submenu index="1-2">
              <template slot="title"
                ><router-link to="/zhubo" tag="span"
                  >主播管理</router-link
                ></template
              >
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>业务管理</span>
            </template>
            <el-submenu index="2-1">
              <template slot="title"
                ><router-link to="/goods" tag="span"
                  >商品管理</router-link
                ></template
              >
            </el-submenu>
            <el-submenu index="2-2">
              <template slot="title"
                ><router-link to="/sales" tag="span"
                  >主播销售情况</router-link
                ></template
              >
            </el-submenu>
            <el-submenu index="2-3">
              <template slot="title"
                ><router-link to="/profit" tag="span"
                  >主播分成情况</router-link
                ></template
              >
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span><router-link to="" tag="span">个人信息</router-link></span>
            </template>
            <el-submenu index="3-1">
              <template slot="title"
                ><router-link to="/mine" tag="span"
                  >个人中心</router-link
                ></template
              >
            </el-submenu>
          </el-submenu>
        </el-menu>
      </div>
      <div class="content"><router-view></router-view></div>
    </main>
  </div>
</template>

<script>
import Header from "./Header";
export default {
  components: { Header },
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    handleOpen() {},
    handleClose() {},
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
        } else {
          return this.$message({
            message: "请您填写准确的信息",
            type: "warning"
          });
        }
      });
    },
    cancelForm() {
      this.ruleForm = {
        username: "",
        name: "",
        phone: "",
        airpay: "",
        pass: ""
      };
      this.dialogVisible = false;
      this.$message("您已取消添加新成员");
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.navMenu {
  .el-menu-vertical-demo {
    width: 200px;
    min-height: 1000px;
  }
}
main {
  display: flex;
  .content {
    flex: 1;
  }
}
.el-submenu {
  span {
    display: inline-block;
    width: 100%;
  }
}
</style>
